<template>
  <view class="bg " >
    <view class="withdraw__top">
      <view class="amount ">
        <view>{{pushCount.totalCount}}</view>
        <text>人</text>
      </view>
      <view class="amount__title">推广人数</view>
      <view class="withdraw__amount">
        <view>已核销 {{pushCount.checkCount}} 人</view>

      </view>
    </view>
    <view class="withdraw__list ">
      <u-tabs :list="tabsList"
              :is-scroll="false"
              :show-bar="false"
              active-color="#6BAEFF"
              inactive-color="#AEB3C0"
              :current="query.type" @change="change"></u-tabs>
      <view class="list " v-for="list in pushList" :key="list.id">
        <view :class="['list-left']">
          <text class="apply__name">{{list.nickName}} 已领取</text>
          <text class="apply__card">{{list.activityTitle}} </text>
          <text class="apply__card">{{list.couponTitle}} </text>
        </view>
        <view class="list-right " >
          <!-- 0未使用  1已使用 2已过期 -->
          {{list.useStatus == 0?'未使用':list.useStatus == 1?'已使用':'未使用'}}
        </view>
      </view>
      <u-loadmore v-if="pushList.length > 9" :status="loadingStatus" :margin-top="40" :margin-bottom="40" @loadmore="loadingMore" />
      <u-empty v-if="pushList.length == 0" text="暂无数据" mode="data" viewHeight="80"></u-empty>

    </view>
    <w-loading text="加载中..." mask="true" click="true" ref="loading"></w-loading>
    <u-toast ref="uToast"/>

  </view>
</template>
<script>
import {getPushCount,pushList} from "../../api/coupon";

export default {

  data() {
    return {
      tabsList: [{
        name: '优惠券'
      }, {
        name: '纯推广'
      }],
      loadingStatus:'loadmore',
      current: 1,
      //总推广人数和成功核销人数
      pushCount:{},
      //推广列表
      pushList:[],
      //请求列表数据
      query:{
        type:0,
        pageNum:1,
        pageSize:10,
      },
      //是否现实骨架屏
      loading:true,
      totalPage:"",
    }
  },
  onLoad(){
  },
  onShow(){

    this.getPushInfo();
    this.getList(1);
  },

  methods:{
    //总推广人数和成功核销人数
    getPushInfo(){
      getPushCount().then(res =>{
        this.pushCount = res.data;
      })
    },
    //查询代理商提现列表
    //type 1首次加载 2分页数据
    getList(type){
      this.loadingStatus = "loading";
      pushList(this.query).then(res =>{
        if (res.code == 200){
          if (type == 1){
            this.pushList = res.rows;
          }
          if (type == 2){
            this.pushList.push.apply(this.pushList,res.rows)
          }
          this.totalPage = Math.ceil(res.total / this.query.pageSize)
          if (this.query.pageNum < this.totalPage) {
            this.loadingStatus = "loadmore"
          }
          if (this.query.pageNum >= this.totalPage) {
            this.loadingStatus = "nomore"
          }
        }
      }).catch(err =>{
      })
    },
    change(index) {
      this.query = {
        pageNum: 1,
        pageSize: 10,
        type:index
      }
      this.getList(1);
    },
    //加载更多
    loadingMore(){
      if (this.query.pageNum <= this.totalPage) {
        this.query.pageNum += 1;
        this.getList(2)
      }
    }
  },
  onReachBottom() {

  }
}
</script>

<style lang="scss" scoped>
.bg{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: linear-gradient(180deg, #11998e 0%, #FFFFFF 100%);
}
.withdraw__top{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  margin-top: 20rpx;
  .amount{
    display: flex;
    align-items: center;
    >text{
      font-size: 30rpx;
      margin-top: 8rpx;
      margin-left: 10rpx;
    }
    >view{
      font-size: 78rpx;

    }
  }
  .withdraw__amount{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    height: 74rpx;
    margin: 30rpx auto;
    border-radius: 16rpx;
    background: rgba(255,255,255,0.2);
    padding: 0 20rpx;
  }
}
.invalid-color{
  color: #AEB3C0!important;
}
.withdraw__list{
  width: 90%;
  height: calc(100vh - 400rpx);
  margin: 0rpx auto;
  min-height: 300rpx;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx 0;
  overflow-y:auto;

}
.list{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid rgba(151, 151, 151, 0.16);;
  padding: 15rpx 0;
  .list-left{
    color: #2E3C4D;
    >text{
      display: block;
      margin: 5rpx 0;
    }
    .apply__name{
      font-size: 30rpx;
      font-weight: bold;
    }

  }
  .list-right{
    font-size:30rpx;
    color: #D43F3D;
  }
}


</style>
